<script setup lang="ts">
import { showSuccessToast } from "vant";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import { useI18n } from "vue-i18n";
import { ActivityAxios } from "@/api";
import { UserStore } from "@/store";
import { coypText } from "@/utils";
import { FiltrationFun } from "@/utils";
const userStore = UserStore();
const { t } = useI18n();
const router = useRouter();
const texts = ref([] as any);
/***************************** */
const arrList: any = ref([]);
const gotoPage = () => {
  if (userStore.isLogin) {
    router.push({
      name: RouterEnums.SUBORDINATELIST,
      query: { totalbet: chestInfo.value.totalBet, totalrecharge: chestInfo.value.totalRecharge },
    });
  } else {
    router.push(RouterEnums.LOGIN);
  }
};
const httpUrl = ref("");
onMounted(() => {
  //获取分享链接
  const currentUrl = window.location.href;
  const index = currentUrl.indexOf("#");
  if (index !== -1) {
    // 截取从 0 开始到指定字符串下标的部分
    httpUrl.value = currentUrl.substring(0, index);
    httpUrl.value = userStore.isLogin
      ? httpUrl.value + `?a=${userStore.userLoginInfo.account.linkId}`
      : httpUrl.value;
  }

  getconfigDesc();
  if (userStore.isLogin) {
    getChestInfo();
  } else {
    //活动配置
    getconfig();
  }
  //获取要分享出去的图文
  getWebsiteShareConfig();
});
const copyUserID = () => {
  coypText(httpUrl.value);
  showSuccessToast("Success");
};
//活动配置
const treasureChestLeng = ref(0);
const getconfig = () => {
  ActivityAxios.getconfig({ acttype: 3 }).then(res => {
    const result: any = [];
    treasureChestLeng.value = res.configs.length;
    res.configs.map((item, index) => {
      item.TreasureBoxConfig["itemIndex"] = index + 1;
    });
    for (let i = 0; i < res.configs.length; i += 4) {
      result.push(res.configs.slice(i, i + 4));
    }
    result.map((item, index) => {
      if ((index + 1) % 2 === 0) {
        item.reverse();
      }
    });
    arrList.value = result;
    /// console.log("活动配置", arrList.value);
  });
};
// 描述
const getconfigDesc = () => {
  ActivityAxios.getActConfigDesc({ actType: 3 }).then((res: any) => {
    texts.value = res.list;
  });
};
const chestInfo: any = ref({
  curpeoplenum: 0,
  peoplenum: 0,
  totalBet: 0,
  totalRecharge: 0,
});
//获取宝箱信息 peoplenum已领取
const getChestInfo = () => {
  ActivityAxios.getChestInfo().then(res => {
    chestInfo.value = res;
    const result: any = [];
    res.list.map((item: any, index) => {
      item["itemIndex"] = index + 1;
    });
    for (let i = 0; i < res.list.length; i += 4) {
      result.push(res.list.slice(i, i + 4));
    }
    result.map((item, index) => {
      if ((index + 1) % 2 === 0) {
        item.reverse();
      }
    });
    //console.log("是什么", result);
    arrList.value = result;
  });
};
//获取宝箱奖励
const getReceiveChest = item => {
  //0置灰状态下1未领取2领取
  if (userStore.isLogin && item.claimFlag == 1) {
    ActivityAxios.getReceiveChest({ peopleNum: item.peopleNum }).then(res => {
      if (res === null) {
        showSuccessToast("Success");
      }
    });
  }
};

const shareContent = ref("");
const sharePicture = ref("");
//获取网站分享配置
const getWebsiteShareConfig = () => {
  ActivityAxios.getWebsiteShareConfig().then(res => {
    shareContent.value = res.shareContent;
    sharePicture.value = res.sharePicture;
  });
};
//分享平台
const shareShareTerrace = item => {
  const data = {
    name: item,
    title: "br11.com",
    text: shareContent.value,
    url: httpUrl.value, // 可选分享的链接
    img: sharePicture.value,
  };
  FiltrationFun.shareTerrace(data);
};
</script>
<template>
  <!-- 宝箱活动 -->
  <div class="frame-div" style="height: 1061px">
    <img class="title-img" src="@/image/new_img/activity/ppbxv2_top_banner.png" />
    <div class="top-frame">
      <div class="title-frame">{{ t("activity.treasureChest.myLinks") }}:</div>
      <div class="link-frame df ai-center jc-space-between">
        <div class="link-text">
          {{ httpUrl }}
        </div>
        <div class="share-frame df jc-center ai-center" @click="copyUserID">
          {{ t("activity.treasureChest.copy") }}
        </div>
      </div>
      <div class="title-frame">
        {{ t("activity.treasureChest.quickShare") }}
      </div>
      <div class="sharePlatform df jc-space-between ai-center">
        <div
          class="platform-type"
          data-href="http://www.br0011.com/"
          data-layout="button_count"
          data-size="small"
          data-mobile-iframe="true"
          @click="shareShareTerrace('Facebook')"
        >
          <img class="platform-img" src="@/image/new_img/activity/facebook_cai.svg" />
          <div>Facebook</div>
        </div>
        <div class="platform-type" @click="shareShareTerrace('WhatsApp')">
          <img class="platform-img" src="@/image/new_img/activity/Whatsapp_cai.svg" />
          <div>Whatsapp</div>
        </div>
        <div class="platform-type" @click="shareShareTerrace('Telegram')">
          <img class="platform-img" src="@/image/new_img/activity/Telegram_cai.svg" />
          <div>Telegram</div>
        </div>
        <div class="platform-type" @click="shareShareTerrace('Instagram')">
          <img class="platform-img" src="@/image/new_img/activity/insgram_cai.svg" />
          <div>Instagram</div>
        </div>
        <div class="platform-type" @click="shareShareTerrace('Twitter')">
          <img class="platform-img" src="@/image/new_img/activity/twitter_cai.svg" />
          <div>Twitter</div>
        </div>
        <div class="platform-type" @click="shareShareTerrace('Kwai')">
          <img class="platform-img" src="@/image/new_img/activity/kwai_cai.svg" />
          <div>Kwai</div>
        </div>
      </div>
      <div class="share-val-frame df ai-center jc-space-between">
        <div class="share-title">
          {{ t("activity.treasureChest.mySubordinates") }}
        </div>
        <div class="share-frame df jc-center ai-center">
          <div class="share-val">{{ chestInfo.curpeoplenum }}</div>
          <div class="share-val-title">{{ t("activity.treasureChest.people") }}</div>
          <img
            class="rigth-frame"
            src="@/image/new_img/activity/jiantou_xiaji.png"
            @click="gotoPage"
          />
        </div>
      </div>
      <div class="treasure-chest-frame df ai-center fw-wrap">
        <div
          v-for="(item, index) in arrList"
          :key="index"
          class="treasure-chest-content df ai-center fw-wrap"
        >
          <div v-for="(items, indexs) in item" :key="indexs" class="chest-cantent">
            <img
              v-show="!userStore.isLogin"
              class="baoxiang-img"
              src="@/image/new_img/activity/baoxiang.png"
            />
            <img
              v-show="userStore.isLogin && items.claimFlag == 0"
              class="baoxiang-img"
              src="@/image/new_img/activity/baoxiang.png"
            />
            <img
              v-show="userStore.isLogin && items.claimFlag == 1"
              class="baoxiang-img"
              src="@/image/new_img/activity/baoxiang_01.png"
              @click="getReceiveChest(items)"
            />
            <img
              v-show="items.claimFlag == 2"
              class="baoxiang-img"
              src="@/image/new_img/activity/baoxiang_02.png"
            />
            <img
              v-if="(index + 1) % 2 != 0 && item.length != indexs + 1"
              class="arrow-rigth-img"
              src="@/image/new_img/activity/shuangjiantou_white.svg"
            />
            <img
              v-if="
                ((index + 1) % 2 !== 0 &&
                  indexs + 1 == item.length &&
                  arrList.length !== 1 &&
                  item.length !== 1 &&
                  treasureChestLeng !== items.itemIndex) ||
                ((index + 1) % 2 == 0 &&
                  indexs == 0 &&
                  index + 1 !== arrList.length &&
                  arrList.length !== 1 &&
                  item.length !== 1 &&
                  treasureChestLeng !== items.itemIndex)
              "
              class="arrow-bottom-img"
              src="@/image/new_img/activity/shuangjiantou_white.svg"
            />
            <img
              v-if="(index + 1) % 2 == 0 && item.length != indexs + 1"
              class="arrow-left-img"
              src="@/image/new_img/activity/shuangjiantou_white.svg"
            />
            <div class="val-frame">
              <span v-if="userStore.isLogin">
                {{ items.peopleNum }}
              </span>
              <span v-else>
                {{ items.TreasureBoxConfig.people_num }}
              </span>
              <!-- {{ userStore.isLogin ? items.peopleNum : items.TreasureBoxConfig.people_num
              }} -->
              {{ t("activity.treasureChest.people") }}
            </div>
            <div :data="items.itemIndex" class="number-frame">
              <span v-if="userStore.isLogin">
                {{ items.award / 100 }}
              </span>
              <span v-else>
                {{ items.TreasureBoxConfig.award / 100 }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="divider-frame df ai-center jc-center">
        <div class="divider-div"></div>
        <div class="divider-name">{{ t("activity.eventDescription") }}</div>
        <div class="divider-div divider-div-rigth"></div>
      </div>
      <div class="eventDescription-frame">
        <div v-for="(items, index) in texts" :key="index" class="textWrap">
          {{ `${index + 1}.${items?.actDescContent}` }}
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.frame-div {
  background-image: linear-gradient(158deg, rgb(243, 154, 79) 0%, rgb(164, 0, 255) 100%);
}
.top-frame {
  width: calc(100% - 64px);
  height: auto;
  margin: auto;
  margin-left: 32px;
  // margin-top: 46px;

  .title-frame {
    color: #fff;
    font-size: 28px;
    margin-top: 18px;
  }

  .link-frame {
    width: 100%;
    background: #00000026;
    height: 100px;
    border-radius: 28px;
    margin-top: 18px;
    margin-bottom: 28px;

    .link-text {
      font-size: 24px;
      margin-left: 25px;
      color: hsla(0, 0%, 100%, 0.65);
    }

    .share-frame {
      width: 133px;
      height: 82px;
      margin-right: 14px;
      position: relative;
      left: 0;
      right: 0;
      color: #fff;
      font-size: 22px;
      background-image: url("../../image/new_img/activity/fuzhianniu.png");
      background-size: 100% 100%;
    }
  }

  .sharePlatform {
    width: 100%;
    height: auto;
    margin-top: 28px;

    .platform-type {
      width: auto;
      height: auto;
      text-align: center;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.65);

      .platform-img {
        width: 66px;
        height: 66px;
        margin-bottom: 6px;
      }
    }
  }

  .share-val-frame {
    width: 100%;
    background: rgba(0, 0, 0, 0.08);
    height: 82px;
    border-radius: 38px;
    margin-top: 16px;
    margin-bottom: 30px;

    .share-title {
      font-size: 28px;
      margin-left: 25px;
      color: rgba(255, 255, 255, 0.85);
    }

    .share-val {
      color: rgb(255, 238, 0);
      font-size: 32px;
    }

    .share-val-title {
      font-size: 24px;
      color: rgba(255, 255, 255, 0.65);
      margin-left: 6px;
      margin-right: 25px;
    }

    .rigth-frame {
      width: 50px;
      height: 50px;
      margin-right: 15px;
      margin-left: 15px;
    }
  }

  .treasure-chest-frame {
    width: 100%;
    height: auto;

    .treasure-chest-content {
      width: 100%;
      height: auto;
    }

    .chest-cantent {
      width: 100%;
      height: 144px;
      position: relative;
      top: 0;
      left: 0;
      width: 139px;
      height: auto;
      margin-right: 42px;
      margin-bottom: 40px;

      .baoxiang-img {
        width: 138.46px;
        height: 100px;
      }

      .arrow-bottom-img {
        width: 30px;
        height: 30px;
        position: absolute;
        transform: rotate(90deg);
        bottom: -34px;
        left: 56px;
      }

      .arrow-left-img {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 32px;
        right: -38px;
        z-index: 2;
        transform: rotate(180deg);
      }

      .arrow-rigth-img {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 38px;
        right: -34px;
        z-index: 2;
      }

      .val-frame {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: hsla(0, 0%, 100%, 0.85);
        position: absolute;
        top: 70px;
        left: 0;
      }

      .number-frame {
        width: 100%;
        text-align: center;
        font-size: 20px;
        color: hsla(0, 0%, 100%, 0.65);
        margin-top: 4px;
      }
    }

    .chest-cantent:nth-child(4n + 0) {
      margin-right: 0;
    }
  }

  .divider-frame {
    width: 100%;
    height: auto;
    margin-top: 28px;

    .divider-div {
      width: 129px;
      height: 2px;
      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 100%
      );
    }

    .divider-div-rigth {
      transform: scaleX(-1);
    }

    .divider-name {
      color: rgba(255, 255, 255, 0.85);
      font-size: 24px;
      margin-left: 13px;
      margin-right: 13px;
    }
  }

  .eventDescription-frame {
    width: 100%;
    height: auto;
    font-size: 22px;
    margin-top: 31px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 50px;
    .textWrap {
      word-wrap: break-word;
      margin: 0 20px 0;
    }
  }
}
.title-img {
  width: 100%;
  height: 332px;
}
</style>
